<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
    body {
        background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
        min-height: 100vh;
        font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
    }
    @keyframes slideDownFadeIn {
        0% {
            opacity: 0;
            transform: translateY(-60px) scale(0.92);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    .container {
        max-width: 520px !important;
        margin-top: 100px !important;
    }
    .main-content {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
        padding: 48px 40px 36px 40px;
        margin-top: 30px;
        transition: box-shadow 0.3s;
        font-size: 1.15rem;
        animation: slideDownFadeIn 0.8s cubic-bezier(.23,1.02,.32,1) both;
    }
    .main-content:hover {
        box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.22);
    }
    h2 {
        font-weight: 700;
        color: #3a3a3a;
        letter-spacing: 2px;
        font-size: 30px;
    }
    .form-control, .form-select {
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        transition: border-color 0.2s;
        font-size: 18px;
        padding: 8px 12px;  /* 调整内边距更协调 */
        height: auto;
        box-sizing: border-box;
        width: 100%;  /* 添加宽度保证一致性 */
    }

    /* 修正占位符样式 */
    .form-control::placeholder {
        font-size: 16px;  /* 30px 过大，调整为合理值 */
        opacity: 0.6;    /* 适当透明度更符合设计规范 */
        color: #666;     /* 添加颜色定义 */
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #74ebd5;
        box-shadow: 0 0 0 2px #74ebd540;
        outline: none;  /* 移除浏览器默认outline */
    }

    /* 修正下拉菜单选项字体 */
    select.form-control option {
        font-size: 16px;  /* 保持与输入框一致 */
        padding: 8px;     /* 增加选项内边距 */
    }

    /* 浏览器兼容性补充 */
    select.form-control::-ms-expand {
        display: none;  /* 隐藏IE默认箭头 */
    }

    /* Safari/Firefox 占位符样式修正 */
    input::-webkit-input-placeholder { /* Safari */
        opacity: 0.6;
    }
    input::-moz-placeholder { /* Firefox */
        opacity: 0.6;
    }
    .btn-primary {
        background: linear-gradient(90deg, #74ebd5 0%, #ACB6E5 100%);
        border: none;
        border-radius: 10px;
        font-weight: 600;
        letter-spacing: 1px;
        transition: background 0.2s, box-shadow 0.2s;
        box-shadow: 0 2px 8px 0 rgba(116, 235, 213, 0.15);
        font-size: 1.25rem;
        padding: 14px 0;
        width: 100%;
        display: block;
    }
    .btn-primary:hover {
        background: linear-gradient(90deg, #ACB6E5 0%, #74ebd5 100%);
        box-shadow: 0 4px 16px 0 rgba(116, 235, 213, 0.25);
    }
    #loginMsg {
        font-size: 15px;
        padding: 8px 0;
        border-radius: 6px;
        background: #ffeaea;
        color: #d9534f;
        margin-top: 10px;
    }
    label {
        font-weight: 500;
        color: #555;
        font-size: 20px;
        margin-bottom: 6px;
    }
    .btn-register {
        background: #fff;
        color: #5bc0de;
        border: 2px solid #5bc0de;
        border-radius: 10px;
        font-weight: 600;
        font-size: 1.1rem;
        letter-spacing: 1px;
        box-shadow: 0 2px 8px 0 rgba(91,192,222,0.08);
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
        margin-top: 10px;
    }
    .btn-register:hover {
        background: linear-gradient(90deg, #74ebd5 0%, #ACB6E5 100%);
        color: #fff;
        border-color: #74ebd5;
        box-shadow: 0 4px 16px 0 rgba(91,192,222,0.18);
    }
    </style>
</head>
<body>
<div class="container" style="max-width:400px;margin-top:80px;">
    <div class="main-content">
        <h2 class="text-center mb-4">用户登录</h2>

        <form id="loginForm">
            <div class="form-group mb-3">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" name="username" required placeholder="请输入用户名">
            </div>
            <div class="form-group mb-3">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" name="password" required placeholder="请输入密码">
            </div>
            <div class="form-group mb-3">
                <label for="role">职务</label>
                <select class="form-control" id="role" name="role" required>
                    <option value="">请选择职务</option>
                    <option value="员工">员工</option>
                    <option value="经理">经理</option>
                    <option value="管理员">管理员</option>
                </select>
            </div>

            <button type="submit" class="btn btn-primary w-100">登录</button>
        </form>
       <!-- <button type="button" class="btn btn-register w-100 mt-3" onclick="window.location.href='register.html'">注册</button>-->
        <div id="loginMsg" class="mt-3 text-center text-danger" style="display:none;"></div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="login.js"></script>
</body>
</html>
